@import "../../../styles/bootstrap-variables";
@import "bootstrap/scss/input-group";
.bs-input-wrap{
  position: relative;
  flex: 1;
}
.form-control{
  &[type="password"]::-ms-reveal,
  &[type="password" i]::-ms-reveal{
    display:none
  }
  &[type=number]::-webkit-inner-spin-button,
  &[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
  &:focus{
    z-index: 5;
  }
}
.bs-input-prefix,
.bs-input-suffix{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 5;
  top: 1px;
  bottom: 1px;
  min-width: 2rem;
}
.bs-input-prefix{
  left: 1px;
}
.bs-input-suffix{
  right: 1px;
}
.bs-input-text-count{
  padding: 0 0.5rem;
  font-size: 0.875rem;
  background-color: #fff;
}
.bs-input-suffix-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  align-self: stretch;
  font-size: 1rem;
  color: #aaa;
  &:hover{
    color: #333;
  }
  &.show-password_icon{
    cursor: pointer;
  }
  &.clear-content_icon {
    /*&:not([data-only-child="true"]){
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      //left: 0;
      bottom: 0;
      right: 1px;
      width: 100%;
      text-align: center;
      background-color: #fff;
    }*/
    position: absolute;
    top: 1px;
    left: 0;
    bottom: 1px;
    right: 1px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s;
    background-color: #fff;
    .bs-icon{
      transform: scale(0.9);
    }
  }
  &.show-password_icon{
    .bs-icon{
      transform: scale(1.1);
    }
  }
}

.bs-textarea{
  .bs-input-wrap{
    &>.bs-input-text-count{
      position: absolute;
      z-index: 3;
      bottom: 0.5rem;
      right: 0.5rem;
      background-color: rgba(255,255,255, 0.8);
    }
  }
}

.bs-input{
  .form-control{
    z-index: 2;
  }
  &.has-prepend{
    .form-control{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  &.has-append{
    .form-control{
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &.has-show-password_icon,
  &.has-clear-content_icon,
  &.has-custom-suffix_icon{
    .form-control{
      padding-right: 2rem;
    }
  }
  &.has-clear-content_icon{
    .clear-content_icon{
      opacity: 1;
    }
  }
  /*&.has-suffix-icon{
    .form-control{
      padding-right: 2rem;
    }
  }*/
  &.has-prefix-icon{
    .form-control{
      padding-left: 2rem;
    }
  }
  &.is-disabled {
    .clear-content_icon{
      display: none;
    }
    .bs-input-suffix-icon{
      &:hover{
        color: #aaa;
      }
    }
    .bs-input-text-count{
      background-color: transparent;
    }
  }
  &.is-readonly{
    .bs-input-text-count{
      background-color: transparent;
    }
  }

  &.input-group-lg{
    .bs-input-prefix,
    .bs-input-suffix{
      min-width: 2.75rem;
    }
    .bs-input-prefix-icon,
    .bs-input-suffix-icon{
      font-size: 1.25rem;
    }
    /*&.has-suffix-icon{
      .form-control{
        padding-right: 2.75rem;
      }
    }*/
    &.has-show-password_icon,
    &.has-clear-content_icon,
    &.has-custom-suffix_icon{
      .form-control{
        padding-right: 2.75rem;
      }
    }
    &.has-prefix-icon{
      .form-control{
        padding-left: 2.75rem
      }
    }
  }

  &.input-group-sm{
    .bs-input-prefix,
    .bs-input-suffix{
      min-width: 1.6rem;
    }
    .bs-input-prefix-icon,
    .bs-input-suffix-icon{
      font-size: 0.875rem;
    }
    &.has-show-password_icon,
    &.has-clear-content_icon,
    &.has-custom-suffix_icon{
      .form-control{
        padding-right: 1.6rem;
      }
    }
    /*&.has-suffix-icon{
      .form-control{
        padding-right: 1.6rem;
      }
    }*/
    &.has-prefix-icon{
      .form-control{
        padding-left: 1.6rem
      }
    }
  }

  & > .input-group-prepend{
    & > .bs-select{
      margin-left: -1px;
      &.is-focus{
        z-index: 3;
      }
      .form-control{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:first-child{
        .form-control{
          border-top-left-radius: 0.25rem;
          border-bottom-left-radius: 0.25rem;
        }
      }
    }
    & > .bs-dropdown {
      & > .btn{
        border-left: 1px solid #bfbfbf;
        border-radius: 0;
      }
      &:first-child > .btn{
        border-left: none;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
      }
    }
  }
  & > .input-group-append {
    &  > .bs-select{
      margin-right: -1px;
      &.is-focus{
        z-index: 3;
      }
      .form-control{
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      &:last-child{
        .form-control{
          border-top-right-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
        }
      }
    }
    & > .bs-dropdown {
      & > .btn{
        border-right: 1px solid #bfbfbf;
        border-radius: 0;
      }
      &:last-child > .btn{
        border-right: none;
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
      }
    }
  }

  .bs-ghost-textarea{
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0;
  }
}
